<template>
	<view class="content">
		<view class="order-tab">
			<view class="tab-ul">
				<view class="ul-lies" v-for="item, index in tab" :key="index">
					<text class="lies-p" :class="index == check ? 'checkout' : ''"
						@click="tag(item, index)">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view class="empty">
		</view>
		<view class="order-module">
			<view class="box" v-for="(item,index) in orderList" :key="item.id" @click="godetail(item)">
				<view class="module-left">
					<view class="left-box">
						<image class="box-img" :src="item.logoUrl" mode=""></image>
						<text class="box-word">{{item.storeName}}</text>
					</view>
					<text class="left-p">{{tab[item.orderStatus].title}} </text>
				</view>
				<view class="module-lists">
					<ul class="lists-ul">
						<li class="ul-leis" v-for="it, i in item.orderItemVOS" :key="i">
							<view class="leis-left">
								<image class="left-images" :src="it.gooodsImg" mode=""></image>
							</view>
							<view class="leis-right">
								<text class="right-p">{{it.goodsName}}</text>
								<view class="right-word">
									<text class="word-Stext"> <text class="small">x</text> {{it.count}} </text>
									<!-- <text class="word-Stext">￥{{ it.goodsPrice/100 }}</text> -->
									<cn-money :money="it.goodsPrice/100" color="#000" :size="28"></cn-money>
								</view>
							</view>
						</li>
					</ul>
				</view>

				<view class="module-all">
					<text class="all-all">{{item.createTime}}</text>
					<view class="all-box">
						<text class="box-num">共{{item.goodsCount}}件</text>
						<cn-money :money="item.payPrice/100" color="#000" :size="38"></cn-money>
					</view>
				</view>

				<view class="module-button">
					<text></text>
					<text class="button-btn" v-if="item.orderStatus == 1" @click.stop="onAppSubmit(item)">立即支付</text>
					<text class="button-btn" v-if="item.orderStatus == 3" @click.stop="godetail(item)">确认收货</text>
				</view>
			</view>
		</view>
		<view class="order-empty"></view>

		<!-- 商品下架提醒 -->
		<OffShelf ref="OffShelf"></OffShelf>

		<!--导航栏 -->
		<tabBar selectedIndex="2"></tabBar>
	</view>
</template>

<script>
	import {
		confrim,
		pageList,
		submitAdd,
		orderDetail,
		orderReceive
	} from '../../api/apia';

	import {
		payAppSubmit
	} from "@/api/apis.js"
	import {
		mapState,
		mapMutations
	} from "vuex";

	import {
		fetchData
	} from "@/utils/allPay.js"
	export default {
		data() {
			return {
				type: 'arrowthinleft',
				tab: [{
						title: '全部',
						id: 0
					},
					{
						title: '待付款',
						url: '/pages/allorderspage/allorderspage',
						id: 1,
					},
					{
						title: '待发货',
						url: '/pages/allorderspage/allorderspage',
						id: 2
					},
					{
						title: '待收货',
						url: '/pages/allorderspage/allorderspage',
						id: 3
					},
					{
						title: '已完成',
						url: '/pages/allorderspage/allorderspage',
						id: 4
					},

					{
						title: '已取消',
						url: '/pages/allorderspage/allorderspage',
						id: 5
					},
				],
				check: 0,
				show: false,
				confrim: {
					orderStatus: null,
					pageNo: 1,
					pageSize: 10
				},

				isLoading: true, // 是否加载完数据
				orderList: [],
				StatusBarHeight: 0,
				TitleBarHeight: 0,
				NavBarHeight: 0,
				LeftIconLeft: 0
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		onReachBottom() {
			if (this.isLoading) {
				this.loadMore(); // 触底加载更多
			}
		},
		onPullDownRefresh() {
			this.refreshData(); // 下拉刷新
		},

		created() {
			// this.confrim.pageNo = 1;
			// this.orderList = []
			// this.onSearch()
		},
		mounted() {
			// this.confrim.pageNo = 1;
			// this.orderList = []
			// this.onSearch()
		},
		onShow() {
			this.confrim.pageNo = 1;
			this.orderList = []
			this.onSearch()
		},
		methods: {
			// 加载更多数据
			loadMore() {
				this.confrim.pageNo++;
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
			},
			// 刷新数据
			refreshData() {
				this.confrim.pageNo = 1;
				this.orderList = []
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			// 获取订单数据
			onSearch() {
				let params = {
					...this.confrim
				}
				params.customerId = this.Info.id
				if (this.check == 0) {
					params.orderStatus = undefined
				} else {
					params.orderStatus = this.check
				}
				pageList(params).then(res => {
					let records = res.result.records
					if (records.length < this.confrim.pageSize) {
						this.isLoading = false
					} else {
						this.isLoading = true
					}
					for (var i = 0; i < records.length; i++) {
						let item = records[i]
						for (var j = 0; j < item.orderItemVOS.length; j++) {
							item.orderItemVOS[j].gooodsImg = JSON.parse(item.orderItemVOS[j].goodsUrl)[0]
						}
					}
					this.orderList = [...this.orderList, ...records]
					console.log(this.orderList);
					uni.stopPullDownRefresh(); // 停止下拉刷新
				})
			},


			tag(val, i) {
				this.check = i
				this.confrim.pageNo = 1;
				this.orderList = []
				this.onSearch()
				// if(this.check == i){
				// }
			},
			// 详情
			godetail(item) {
				uni.navigateTo({
					url: '/pages/allorderspage/allorderspage?id=' + item.id
				})
			},

			// 立即支付
			async onAppSubmit(item) {
				console.log(item);
				let payApp = {
					"orderNo": item.orderNo,
					"payType": item.payType
				}

				if (item.payType == 2) {
					const response = await fetchData(payApp, item.payType)
					console.log("支付宝", response);

					if (response.code == 10060) { // 商品下架
						this.$refs.OffShelf.onExpireChange()
						// uni.showToast({
						// 	title: response.result || '支付失败',
						// 	icon: 'none',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
					} else if (!response.success || response.errCode) {
						uni.showToast({
							title: response.message || '支付失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						return false
					} else if (response.channel.serviceReady) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						setTimeout(() => {
							this.confrim.pageNo = 1;
							this.orderList = []
							this.onSearch()
						}, 2000)
					}
				} else {
					const response = await fetchData(payApp, item.payType)
					// console.log("微信", response);
					if (!response.success || response.errCode) {
						uni.showToast({
							title: response.message || '支付失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});

					}
					if (response.channel.serviceReady) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						setTimeout(() => {
							this.confrim.pageNo = 1;
							this.orderList = []
							this.onSearch()
						}, 2000)
					}
				}

			},

		},

	}
</script>

<style lang="scss">
	.content {
		position: relative;
		min-height: 100vh;
		background-color: #f7f7f7;
		// padding-top: 25rpx;
	}

	.empty {
		height: 80rpx;
		width: 100%;
	}

	.checkout {
		// border-bottom: 10rpx solid $uni-text-color-red;
		padding-bottom: 20rpx;
		font-weight: 600;
		color: #000;
		position: relative;

		// border-radius: 10rpx;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 10rpx;
			width: 100%;
			border-radius: 15rpx;
			background-color: $uni-text-color-red;
			// transition: 0.3s all;
		}
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		background-color: #fff;
	}

	.order-empty1 {
		// height: 230rpx;
	}

	.order-empty {
		height: 60rpx;
	}

	.content {
		// padding: 25rpx;
		width: 100%;
		// height: 100%;
		background-color: #f7f7f7;

		.new-head {
			width: 100%;
			padding: 80rpx 25rpx 20rpx 25rpx;
			background-color: #fff;
		}

		.order-tab {
			position: fixed;
			width: 100%;
			height: 80rpx;
			//#ifndef H5
			top: 40rpx;
			// #endif
			//#ifndef H5
			top: 0rpx;
			// #endif
			z-index: 1;
			// margin-left: -80rpx;
			// padding: 30rpx 25rpx 30rpx;
			background-color: #fff;

			.tab-ul {
				width: 100%;
				list-style: none;
				display: flex;
				justify-content: space-around;
				// align-items: center;

				.ul-lies {
					.lies-p {
						// color: #8c8ea0;
						font-size: 30rpx;
					}
				}
			}
		}

		.order-module {

			// background-color: #fff;
			.box {
				background-color: #fff;
				padding: 25rpx;
				margin: 25rpx;
				border-radius: 15rpx;
			}

			.module-left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-box {
					display: flex;
					align-items: center;

					.box-img {
						height: 38rpx;
						width: 36rpx;
						border-radius: 8rpx;
						background-color: #ccc;
						margin-right: 15rpx;
					}

					.box-word {
						font-size: 27rpx;
					}
				}

				.left-p {
					color: #f4543f;
					font-size: 27rpx;
				}
			}

			.module-lists {
				margin-left: -80rpx;
				// font-weight: 550;
				width: 100%;

				.lists-ul {
					list-style: none;
					width: 100%;

					.ul-leis {
						display: flex;
						// align-items: center;
						padding: 30rpx 0;
						// width: 100%;

						.leis-left {
							width: 20%;

							.left-images {
								width: 110rpx;
								height: 110rpx;
								border-radius: 10rpx;
								background-color: #ccc;
								// margin-right: 20rpx;
							}
						}

						.leis-right {
							width: 80%;

							.right-p {
								font-size: 30rpx;
							}

							.right-word {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 35rpx;
								font-size: 25rpx;

								.word-Stext {
									.small {
										font-size: 25rpx;
									}
								}
							}
						}
					}
				}
			}

			.module-all {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.all-all {
					font-size: 23rpx;
					color: #848484;
				}

				.all-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.box-num {
						font-size: 23rpx;
						color: #848484;
						margin-right: 20rpx;
					}

					.all-allmoney {
						.all-small {
							font-size: 23rpx;
						}
					}
				}
			}

			.module-button {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.button-btn {
					width: 145rpx;
					height: 60rpx;
					display: block;
					background: linear-gradient(to right, #ff2b28, #fd6c2b);
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					border-radius: 15rpx;
					font-size: 25rpx;
					margin-top: 35rpx;
				}
			}
		}
	}
</style>